<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>发起请求</button>
    <button>取消请求</button>
    <script>
        // 1. 获取按钮
        const btn = document.querySelectorAll('button');

        let x = null;
        // 2. 给发起请求添加点击事件        
        btn[0].onclick = function() {
            // 3. 创建XHR对象的构造函数 (重点)
            x = new XMLHttpRequest()
                // 4. 初始化发起一个请求（重点） - 延迟请求
            x.open('get', 'http://localhost/delayServer')
                // 5. 发送请求（重点）
            x.send();
            // 6. 绑定readyState改变的监听（重点）
            x.onreadystatechange = function() {
                    // 5. 标识请求状态的只读属性（重点）
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            console.log(x.response);
                        }
                    }
                    // 6. status: 响应状态码值, 比如200, 404（重点） 
                    // 7. response: 响应体数据, 类型取决于responseType的指定（重点）
                }
                // 8. 绑定一个取消请求监听事件
            x.onabort = function() {
                    console.log("请求被取消了");
                }
                // 9. 执行取消函数
        }

        // 10. 给取消请求按钮添加点击事件
        btn[1].onclick = function() {
            // 11. 执行取消请求函数 x.abort()
            x.abort()
        }
    </script>
</body>

</html>